<template>
  <div class="app-container">
    <el-steps
      :active="1"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="填写视频汇总信息"></el-step>
      <el-step title="填写视频信息"></el-step>
    </el-steps>
    <el-form
      :model="video"
      :rules="rules"
      ref="ruleForm"
      label-width="200px"
      class="demo-ruleForm"
    >
      <el-form-item label="视频汇总名" prop="videoName">
        <el-input v-model="video.videoName"></el-input>
      </el-form-item>
      <el-form-item label="所属科目">
        <el-select v-model="video.subjectId" placeholder="请选择">
          <el-option
            v-for="item in subjects"
            :key="item.id"
            :label="item.subjectName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="视频作者" prop="videoAuthor">
        <el-input v-model="video.videoAuthor"></el-input>
      </el-form-item>
      <el-form-item label="视频汇总简介" prop="videoInfo">
        <el-input v-model="video.videoInfo"></el-input>
      </el-form-item>
      <el-form-item label="视频汇总描述" prop="videoRemarks">
        <el-input v-model="video.videoRemarks"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="video.price" @change="handlePriceChange"></el-input>
      </el-form-item>
      <!--el-form-item label="显示排序" prop="orderNum" >
                <el-input-number v-model="video.orderNum" :min="1" :max="999" label="排序号"></el-input-number>
            </el-form-item-->
      <el-form-item class="myuploader" label="视频汇总封面" prop="videoImg">
        <el-upload
          ref="uploader"
          class="upload-demo"
          :on-change="handleChange"
          :action="uploadUrl"
          :file-list="fileList"
          :data="video"
          :multiple="false"
          :auto-upload="false"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm', 1)"
          >保存退出</el-button
        >
        <el-button type="primary" @click="submitForm('ruleForm', 0)"
          >保存下一步</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addVideoApi } from "@/api/video";
import { getAllSubjectApi } from "@/api/subject";
export default {
  data() {
    return {
      active: 0,
      fileList: [],
      uploadUrl: process.env.VUE_APP_BASE_API + "/video",
      video: {
        userId: 1,
      },
      subjects: [],
      rules: {
        videoUrl: [
          { required: true, message: "请输入Vdeo链接URL", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "请输入排序号", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    getAllSubjectApi().then((response) => {
      this.subjects = response.data;
    });
  },
  methods: {
    handleChange(file, fileList) {
      const isPNG = file.raw.type === "image/png";
      const isLt2M = file.raw.size / 1024 / 1024 < 0.5;
      if (fileList.length > 0) {
        //单个覆盖上传
        this.fileList = [fileList[fileList.length - 1]]; // 这一步，是 展示最后一次选择的csv文件
        if (!isPNG) {
          this.$message.error("上传图片只能是 PNG 格式!");
          this.fileList = [];
          return false;
        } else if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 500kb!");
          this.fileList = [];
          return false;
        }
        return true;
      }
    },
    handlePriceChange() {
      if (isNaN(this.video.price)) {
        this.video.price = 0.0;
      }
    },
    async addVideo() {
      const form = new FormData();
      Object.keys(this.video).forEach((key) => {
        form.append(key, this.video[key]);
      });
      form.append("file", this.fileList[0].raw);
      await addVideoApi(form).then((response) => {
        if (response.status == 0) {
          this.video.id = response.data.id;
        }
      });
    },
    async submitForm(formName, exit) {
      if (this.fileList.length == 0) {
        this.$message("请选择一张图片上传！");
        return;
      }
      //需自定义表单验证，因为await只允许在顶层代码块中使用
      await this.addVideo();
      if (exit == 1) {
        this.$router.push("/content/video");
      } else {
        console.log(this.video.id);
        this.$router.push({
          name: "editVideoInfo",
          params: { id: this.video.id },
        });
      }
    },
    resetForm(formName) {
      this.fileList = [];
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.myuploader >>> .el-list-enter-active,
.myuploader >>> .el-list-leave-active {
  transition: none;
}

.myuploader >>> .el-list-enter,
.myuploader >>> .el-list-leave-active {
  opacity: 0;
}
</style>